/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<!-- 公共底部栏 -->
		<view class="pos_fixed">
			<view class="tpd-footer tpd-footer1">
				<view @tap.stop="distributTopages" :class="[classInfo==0?'tpd-footer-select':'']" data-idx="0" hover-class="none">
					<image :src="imgUrl+'distribut/seller_red@2x.png'" role="img" v-if="classInfo==0"></image>
					<image :src="imgUrl+'distribut/seller_black@2x.png'" v-if="classInfo!=0" ></image>
					<text>
						分销中心
					</text>
				</view>
				<view @tap.stop="distributTopages" :class="[classInfo==1?'tpd-footer-select':'']" data-idx="1" hover-class="none">
					<image :src="imgUrl+'distribut/team_red@2x.png'" v-if="classInfo==1" role="img"></image>
					<image :src="imgUrl+'distribut/team_black@2x.png'" v-if="classInfo!=1" role="img"></image>
					<text>
						我的团队
					</text>
				</view>
				<view @tap.stop="distributTopages" :class="[classInfo==2?'tpd-footer-select':'']" data-idx="2" hover-class="none">
					<image :src="imgUrl+'distribut/money_red@2x.png'" v-if="classInfo==2" role="img"></image>
					<image :src="imgUrl+'distribut/money_black@2x.png'" v-if="classInfo!=2" role="img"></image>
					<text>
						我的账户
					</text>
				</view>
				<view @tap.stop="distributTopages" :class="[classInfo==3?'tpd-footer-select':'']" data-idx="3" hover-class="none">
					<image :src="imgUrl+'distribut/order_red@2x.png'" v-if="classInfo==3" role="img"></image>
					<image :src="imgUrl+'distribut/order_black@2x.png'" v-if="classInfo!=3" role="img"></image>
					<text>
						分销订单
					</text>
				</view>
				<view @tap.stop="distributTopages" data-type="login" :class="[classInfo==4?'tpd-footer-select':'']" data-idx="4" hover-class="none">
					<image :src="imgUrl+'distribut/shop_red@2x.png'" v-if="classInfo==4" role="img"></image>
					<image :src="imgUrl+'distribut/shop_black@2x.png'" v-if="classInfo!=4" role="img"></image>
					<text>
						我的网店
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {mapState} from 'vuex';
	export default {
		props:{
			classInfo:{
				type:Number,
				default:-1
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				loginInfo:"",
				imgUrl:config.imgUrl,
				url:[
					{id:0,url:'/pages/distribut/index/index'},
					{id:1,url:'/pages/distribut/team_list/team_list'},
					{id:2,url:'/pages/user/account/account'},
					{id:3,url:'/pages/distribut/retail_order/retail_order'},
					{id:4,url:'/pages/distribut/shop/shop'}
				]
			};
		},
		methods:{
			/*路径跳转*/ 
			distributTopages(e){
				var idx=e.currentTarget.dataset.idx
				var login=e.currentTarget.dataset.type;
				if(this.classInfo!=idx){
					this.url.forEach((i,index)=>{
						if(idx==i.id){
							if(login){
								// this.params.prom_type=6;
								if(this.hasLogin){
									uni.redirectTo({
										url:i.url
									})
								}else{
									common.islogin()
									
								}
							}else{
								uni.redirectTo({
									url:i.url
								})
							}
							
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
.tpd-footer{
    border-top: 1px solid #f3f3f3;
    height:105rpx;
    background-color: #fff;
    overflow: hidden;
    justify-content:space-around;
    display:flex;
}
.tpd-footer view{
    float: left;
    padding-top:10rpx;
    text-align: center;
}
.tpd-footer image{
    display: block;
    margin: 0 auto;
    width: 48rpx;
    height: 48rpx;
}
.tpd-footer text{
    display: block;
    height: 48rpx;
    margin-bottom: 12rpx;
    font-size: 24rpx;
    line-height: 48rpx;
    color: #666;
}
.tpd-footer-select text{
    color: #ff3b3b;
}
.tpd-footer1 view{
    width: 25%;
}
.tpd-footer2 view{
    width: 20%;
}
.pos_fixed{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;  
}
</style>
